<template>
  <div class="tabs-box">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="业态配置" name="businessConfiguration">
        <business-configuration ref="businessConfiguration"></business-configuration>
      </el-tab-pane>
      <el-tab-pane label="事项配置" name="eventConfiguration">
        <event-configuration ref="eventConfiguration"></event-configuration>
      </el-tab-pane>
      <el-tab-pane label="预算配置" name="budgetConfiguration">
        <budget-configuration ref="budgetConfiguration"></budget-configuration>
      </el-tab-pane>
      <el-tab-pane label="事项类型分组" name="matterGroup">
        <matter-type ref="matterGroup" type="1"></matter-type>
      </el-tab-pane>
      <el-tab-pane label="事项类型配置" name="matterType">
        <matter-type ref="matterType" type="2"></matter-type>
      </el-tab-pane>
      <el-tab-pane label="业务数据" name="importContract">
        <import-contract ref="importContract"></import-contract>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import businessConfiguration from './businessConfiguration';
  import eventConfiguration from './eventConfiguration';
  import budgetConfiguration from './budgetConfiguration';
  import importContract from './importContract';
  import matterType from './matterType';
  export default {
    components: { businessConfiguration, eventConfiguration, budgetConfiguration, importContract, matterType },
    data() {
      return {
        activeName: 'businessConfiguration',
      };
    },

    methods: {
      tabClick() {
        setTimeout(() => {
          this.$refs[this.activeName].getTree && this.$refs[this.activeName].getTree();
        }, 0);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .tabs-box {
    padding: 10px 20px 0 20px;
    width: 100%;
  }
</style>
